<template>
<div class="express-delivery-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">添加模板</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="formFormatData.formData.name">
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="默认快递公司" prop="expressname">
                    <el-select v-model="formFormatData.formData.expressname" placeholder="请选择">
                        <el-option v-for="(item,index) in expressList" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <!-- <el-form-item label="仅限区域内购买">
                    <el-radio-group v-model="formFormatData.formData.displayorder">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item label="计费方式">
                    <el-radio-group v-model="formFormatData.formData.type" :disabled="isFormEdit" @change="typechange">
                        <el-radio :label="0">按件计费</el-radio>
                        <el-radio :label="1">按重计费</el-radio>
                    </el-radio-group>
                    <p class="form-help">保存后计费方式不能更改</p>
                </el-form-item>
                <!-- <el-form-item label="计算方式">
                    <el-radio-group v-model="formFormatData.formData.calctype">
                        <el-radio :label="0">同一订单相同运费模板的商品仅计算一次运费</el-radio>
                        <el-radio :label="1">同一订单相同运费模板的商品都计算一次运费</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item label="配送区域" prop="region">
                    <div class="flex-row flex-align-c">
                        <deliveryarea ref="transfer" :config="{tableData:resetArray}" :changeEvt="transferChange"></deliveryarea>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveFormData" type="primary">保存</el-button>
        <router-link tag="span" to="/orders/expressDelivery">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import deliveryarea from '@/components/DeliveryArea/index'
import {
  deliveryGet,
  deliveryEdit
  // getExpress
} from '@/api/orders'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'ExpressDeliveryAdd',
  components: {
    deliveryarea
  },
  computed: {
  },
  // mounted() {
  //   console.log(this.formFormatData.formData.type, 'xxxxx')
  //   if (this.formFormatData.formData.type === '1') {
  //     console.log('{xxxxxxxxxxxxx')
  //     this.$refs.transfer.type = 'weight'
  //   }
  // },
  created() {
    // console.log(this.formFormatData.formData.type, 'xxxxx')
    this.$nextTick(() => {
      // getExpress().then((response) => {
      //   const { data: { data: msgData = [] }} = response
      //   this.expressList = msgData
      // })
    })
  },
  data() {
    var checkArray = (rule, value, callback) => {
      if (!Array.isArray(value) || (Array.isArray(value) && value.length === 0)) {
        return callback(new Error(`${'请选择配送区域'}！~`))
      } else if ((Array.isArray(value) && value.length > 0)) {
        const findIndex = value.findIndex(item => {
          const { money, moneyex, num, numex } = item
          return typeof money === 'undefined' || typeof moneyex === 'undefined' || typeof num === 'undefined' || typeof numex === 'undefined'
        })

        console.log(findIndex, value, 'checkArray')
        if (findIndex !== -1) {
          return callback(new Error(`${'请完善配送信息'}！~`))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      expressList: [],
      resetArray: [{ type: 'edit' }],
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: deliveryGet,
            params: {
              id: ''
            }
          },
          submitForm: deliveryEdit
        },
        formData: {
          name: '',
          // expressname: '',
          // displayorder: 0,
          type: 0,
          calctype: 0,
          region: []
        },
        rules: {
          name: [
            {
              required: true,
              message: '请填写模板名称',
              trigger: 'change'
            }
          ],
          region: [
            {
              required: true,
              validator: checkArray,
              trigger: 'blur'
            }
          ],
          expressname: [
            {
              required: true,
              message: '请选择默认快递公司',
              trigger: 'change'
            }
          ]
        }
      }
    }
  },
  methods: {
    typechange() {
      if (this.formFormatData.formData.type === 0) {
        this.$refs.transfer.type = 'num'
      } else {
        this.$refs.transfer.type = 'weight'
      }
      this.$refs.transfer.tableData.map(item => {
        const { type } = item
        if (type === 'data') {
          item.num = this.formFormatData.formData.type === 0 ? 1 : 0.01
          item.numex = this.formFormatData.formData.type === 0 ? 1 : 0
        }
      })
    },
    transferChange(list) {
      this.formFormatData.formData.region = list
    },
    saveFormData() {
      this.formFormatSubmit({ router: { type: 'replace', path: '/orders/expressDelivery', code: 1 } })
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data = {} } = response
        if (data.code === 1) {
          this.resetArray = [...data.data.region, ...[{ type: 'edit' }]]
          if (data.data.type === 1) {
            this.$refs.transfer.type = 'weight'
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.express-delivery-add {}
</style>
